<template>
	<view>
		<view class="topcontent">
			<view class="money">{{user.money}}</view>
			<view class="sm">帐户余额</view>
			<view class="cu-btn round xg" @tap="$wanlshop.to('/pages/user2/money/withdraw')">立即提现</view>
		</view>
		<view class="content">

		  <view class="wanl-order-list">
			   <view class="navbar" style="width: 100%;background-color: wheat">
					<view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
						{{ item.text }}
					</view>
				</view>
				<swiper :current="tabCurrentIndex" :disable-touch="true"   duration="300" :style="{height:height}">
					<swiper-item class="tab-content" v-for="(item,key) in navList" >
						<scroll-view class="list-scroll-content content1" scroll-y>						
								<view class="conten">
									<view class="item" @tap="getOrderList('total')">
										<view class="tit" :style="{color:item.now == 0?'#FD562F':''}">下线订单</view>
										<view class="ss">{{item.total?item.total:0}}</view>
									</view>			
									<view class="item" @tap="getOrderList('finish')">
										<view class="tit" :style="{color:item.now == 1?'#FD562F':''}">核销订单</view>
										<view class="ss">{{item.finish?item.finish:0}}</view>
									</view>
									<view class="item">
										<view class="tit" :style="{color:item.now == 2?'#FD562F':''}">预估收入</view>
										<view class="ss">{{item.yincome?item.yincome:0}}</view>
									</view>
									<view class="item" @tap="getOrderList('income')">
										<view class="tit" :style="{color:item.now == 3?'#FD562F':''}">收入</view>
										<view class="ss">{{item.income?item.income:0}}</view>
									</view>
								</view>
							
						</scroll-view>
						
						<view style="padding: 5px 6px;background-color: white;height: 100%;line-height: 1.7;">
							<view v-show="item.now == 0" style="height: 100%;">
								<view v-if="item.totalList.data != undefined"  v-for="(item1,key1) in item.totalList.data" style="border-bottom: 1px gray dashed;margin: 10px 0;">
									<view>{{item1.title}},买家：{{item1.nickname}},{{stateText[item1.state]}},<text style="float: right;color: orange;font-size: 13px;">{{$wanlshop.timeToDate(item1.createtime,'yyyy-mm-dd', false)}}</text></view>
								</view>
								<view v-if="item.totalList.data == undefined || item.totalList.data.length == 0" style="text-align: center;">
									没有记录
								</view>
								<view @tap="loadMore('total')"  v-if="item.totalList.data != undefined && item.totalList.data.length > 0 && item.totalList.last_page > item.totalList.current_page" style="text-align: right;">
									更多
								</view>
					
							</view>
							<view v-show="item.now == 1"  style="height: 100%;">
								<view v-if="item.finishList.data != undefined"  v-for="(item1,key1) in item.finishList.data" style="border-bottom: 1px gray dashed;margin: 10px 0;">
									<view>{{item1.title}},买家：{{item1.nickname}},{{stateText[item1.state]}},<text style="float: right;color: orange;font-size: 13px;">{{$wanlshop.timeToDate(item1.createtime,'yyyy-mm-dd', false)}}</text></view>
								</view>
								<view v-if="item.finishList.data == undefined || item.finishList.data.length == 0" style="text-align: center;">
									没有记录
								</view>
								<view @tap="loadMore('finish')"  v-if="item.finishList.data != undefined && item.finishList.data.length > 0 && item.finishList.last_page > item.finishList.current_page" style="text-align: right;">
									更多
								</view>
							</view>
							<view v-show="item.now == 2" style="height: 100%;">
								
							</view>
							<view v-show="item.now == 3" style="height: 100%;">
								<view v-if="item.incomeList.data != undefined" v-for="(item1,key1) in item.incomeList.data" style="border-bottom: 1px gray dashed;margin: 10px 0;">
									<view>{{item1.memo}},金额：{{item1.money}},余额：{{item1.after}},<text style="float: right;color: orange;font-size: 13px;">{{$wanlshop.timeToDate(item1.createtime,'yyyy-mm-dd', false)}}</text></view>
								</view>
								<view @tap="loadMore('income')" v-if="(item.incomeList.data != undefined) && (item.incomeList.data.length > 0) && (item.incomeList.last_page > item.incomeList.current_page)" style="text-align: right;">
									更多
								</view>
								<view v-if="item.incomeList.data == undefined || item.incomeList.data.length == 0" style="text-align: center;">
									没有记录
								</view>
							</view>
					
							
					
						</view>
						
					</swiper-item>
				</swiper>
			</view>
			
			
		</view>
			
	</view>
</template>

<script>	
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [
					{				
						state: 0,
						text: '今天',
						time:'today',
						loadingType: 'more',
						current_page: 1,
						total:0,
						finish:0,
						yincome:0,
						income:0,
						click:true,
					    now:0,
						totalList: {},						
						finishList: {},
						incomeList:{},
						yincomeList:{},
					},	
					{					
						state: 1,
						text: '昨天',
						time:'-1 days',
						loadingType: 'more',
						current_page: 1,
						total:0,
						finish:0,
						yincome:0,
						income:0,
						click:false,
					    now:0,
						totalList: {},				
						finishList: {},
						incomeList:{},
						yincomeList:{},
					},
					{					
						state: 2,
						text: '本周',
						time:'week',
						loadingType: 'more',
						current_page: 1,
						total:0,
						finish:0,
						yincome:0,
						income:0,
						click:false,
					    now:0,
						totalList: {},					
						finishList: {},
						incomeList:{},
						yincomeList:{},
					},					
					{					
						state: 3,
						text: '上周',
						time:'last week',
						loadingType: 'more',
						current_page: 1,
						total:0,
						finish:0,
						yincome:0,
						income:0,
						click:false,
					    now:0,
						totalList: {},					
						finishList: {},
						incomeList:{},
						yincomeList:{},
					},
					{					
						state: 4,
						text: '本月',
						time:'month',
						loadingType: 'more',
						current_page: 1,
						total:0,
						finish:0,
						yincome:0,
						income:0,
						click:false,
					    now:0,
						totalList: {},					
						finishList: {},
						incomeList:{},
						yincomeList:{},
					},					
					{					
						state: 5,
						text: '上月',
						time:'last month',
						loadingType: 'more',
						current_page: 1,
						total:0,
						finish:0,
						yincome:0,
						income:0,
						click:false,
					    now:0,
						totalList: {},						
						finishList: {},
						incomeList:{},
						yincomeList:{}
					}
				],
				time:'today',
				stateText:{2:'已支付',3:'已发货',4:'已收货',6:'已完成'},
				height:0,
				reload:false,
				top:true,
				
			};
		},
		computed: {
			...mapState(['user'])			
		},
		onLoad() {
			this.loadDate();
			this.updateViewportHeight();
			// 监听窗口大小变化
			uni.onWindowResize(this.updateViewportHeight);
		},
		methods: {
			updateViewportHeight() {
			      const systemInfo = uni.getSystemInfoSync(); // 获取系统信息
			      this.height = (systemInfo.windowHeight-170)+'px'; // 更新视口高度
				  console.log(systemInfo.windowHeight);
			},
			async loadDate() {
				await uni.request({
					url: '/wanlshop/ddporder/getIncome1',
					data: {time:this.navList[this.tabCurrentIndex].time},
					method:'POST',
					success: res => {
						this.navList[this.tabCurrentIndex].total = res.data.total;
						this.navList[this.tabCurrentIndex].finish = res.data.finish;
						this.navList[this.tabCurrentIndex].yincome = res.data.yincome;
						this.navList[this.tabCurrentIndex].income = res.data.income;
						this.navList[this.tabCurrentIndex].click = true;
					}
				});	
				uni.request({
					url: '/wanlshop/ddporder/getList',
					data: {time:this.time,page:1},
					method:'POST',
					success: res => {
						this.navList[this.tabCurrentIndex].totalList = res.data;
					    this.navList[this.tabCurrentIndex].totalPage = res.data.current_page; 
					}
				});	
				
			},
			onSwiperChange(e){
				this.top == false;
				if(this.top == false){
					let index = e.detail.current;
					this.tabCurrentIndex = index;
					if(this.navList[index].click == false){
						this.loadDate();
					}
				}
				
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.top = true;
				if(this.navList[index].click == false){
					this.loadDate();
				}
				
			},
			
			
			getOrderList(type){
				if(type == 'total'){
					this.navList[this.tabCurrentIndex].now = 0;							
				}
				if(type == 'finish'){
					this.navList[this.tabCurrentIndex].now = 1;							
				}
				if(type == 'income'){							
					this.navList[this.tabCurrentIndex].now = 3;												
				}
				if(type == 'total' && this.navList[this.tabCurrentIndex].totalList.data != undefined ){
					return false;
				}
				
				if(type == 'finish' && this.navList[this.tabCurrentIndex].finishList.data != undefined){
					return false;
				}				
				if(type == 'income' && this.navList[this.tabCurrentIndex].incomeList.data != undefined){
					return false;					
				}
				uni.request({
					url: '/wanlshop/ddporder/getList',
					data: {time:this.navList[this.tabCurrentIndex].time,page:this.navList[this.tabCurrentIndex].current_page,type:type},
					method:'POST',
					success: res => {	
						console.log(res.data.data);
						
						if(type == 'total'){
							this.navList[this.tabCurrentIndex].totalList = res.data;	
						}						
						if(type == 'finish'){
							this.navList[this.tabCurrentIndex].finishList = res.data;							
						}
						if(type == 'income'){
							this.navList[this.tabCurrentIndex].incomeList = res.data;											
						}							
					}
				});	
			},
			loadMore(type){
				uni.request({
					url: '/wanlshop/ddporder/getList',
					data: {time:this.navList[this.tabCurrentIndex].time,page:this.navList[this.tabCurrentIndex].current_page+1,type:type},
					method:'POST',
					success: res => {	
						if(type == 'total'){							
							this.navList[this.tabCurrentIndex].totalList.current_page = res.data.current_page;
							res.data.data.forEach(item =>{
								this.navList[this.tabCurrentIndex].totalList.data.push(item);
							})
						}
						if(type == 'finish'){
							this.navList[this.tabCurrentIndex].finishList.current_page = res.data.current_page;
							res.data.data.forEach(item =>{
								this.navList[this.tabCurrentIndex].finishList.data.push(item);
							})
						}
						if(type == 'income'){
							this.navList[this.tabCurrentIndex].incomeList.current_page = res.data.current_page;
							res.data.data.forEach(item =>{
								this.navList[this.tabCurrentIndex].incomeList.data.push(item);
							}) 					
						}							
					}
				});	
			}	
			
			
		}
	}
</script>

<style>
	.topcontent{
		height: 260rpx;
		width: 100%;
		background-color: #FD562F;
		color:white;
		text-align:center;
	}
	.topcontent .money{
		font-size:34rpx;
		font-weight: 600;
		text-align: center;
		padding: 30rpx 0;
	}
	.topcontent .sm{
		margin-top: -20rpx;
		font-size:26rpx;		
	}
	.topcontent .xg{
		margin-top: 20rpx;
		color:#FD4C2D;
		background-color: white;		
	}
	.content1{
		width: 100%;
		height: 140rpx;
		overflow: hidden;
		background-color: #ffffff;
	}
	.content1 .title{		
		padding: 20rpx;
		text-align: center;
		font-weight: 600;
	}
	.conten{
		height: 100%;
		padding-top: 10px;
		overflow: hidden;
	}
	.content1 .conten .item{
		width: 25%;
		float: left;
		text-align: center;
		padding: 0 20rpx;	
		height: 100%;
	}
	.content1 .conten .item .tit{
		height: 60rpx;
	}
	.content1 .conten .item .ss{
		color:#FD4C2D;
		font-weight: 600;
		height: 100rpx;
	}

</style>
